iT邦幫忙

2

[自學筆記] vue.js 關鍵字搜尋

  • 分享至 

  • xImage
  •  

參考文章:https://cythilya.github.io/2017/04/15/vue-watch/

<el-input placeholder="快速搜尋" prefix-icon="el-icon-search" v-model="searchID"></el-input>

<el-table :data="dataList" border style="width: 100%">
      <el-table-column fixed label="帳號" min-width="150" prop="accountID"></el-table-column>  
      <el-table-column label="資訊" min-width="150" prop="data"></el-table-column> 
</el-table>


<script>
export default {
  name: "UserPage",
  data() {
        return {
            searchID: "",
            dataList:[]
        };
    },
    watch:{
    // 與要監聽的data命名一樣(searchID)
        searchID:function(){
            this.fasterSearch();
        }
    },
    methods:{
         fasterSearch() {
             // 使用filter對dataList的ID做篩選
         }
    },
 }
</script>

使用的是vue-cli + element_UI

  1. 先送API請求,要到資料後綁訂到this.dataList給table渲染
  2. 透過watch特性
 (文章: Watch 可讓我們監視某個值,當這個值變動的時候,就去做某些事情。)
  1. 所以就可監聽input輸入框輸入而改變searchID值的時候執行fasterSearch(),篩選出對應的資料,做到不需要再按輸入鍵(Enter)才能進行篩選的動作

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
dragonH
iT邦超人 5 級 ‧ 2020-05-14 16:18:11

通常會加個 debounce time

不然一直按著鍵盤

就會一直去 trigger

gior__ann iT邦新手 2 級 ‧ 2020-05-14 17:19:44 檢舉

感謝分享,我需要去查一下關於debounce time

哈哈~技能太弱,第一次聽到,抱歉/images/emoticon/emoticon20.gif

我要留言

立即登入留言